<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref, Ref } from 'vue';

  import { useECharts } from '@/hooks/web/useECharts';

  import { basicProps } from './props';
  import { getStaticSoptEm, getStockEmotion } from '@/api/dashboard/workspace';
  import {LoadStockData} from "@/utils/wailsjs/go/binds/App";

  export default defineComponent({
    props: basicProps,
    setup() {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

      const loadStockEmotion = async () => {
        return await getStockEmotion();
      };
      onMounted(() => {
        // setOptions({
        //   tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //       lineStyle: {
        //         width: 1,
        //         color: '#019680',
        //       },
        //     },
        //   },
        //   xAxis: {
        //     type: 'category',
        //     boundaryGap: false,
        //     data: [
        //       '6:00',
        //       '7:00',
        //       '8:00',
        //       '9:00',
        //       '10:00',
        //       '11:00',
        //       '12:00',
        //       '13:00',
        //       '14:00',
        //       '15:00',
        //       '16:00',
        //       '17:00',
        //       '18:00',
        //       '19:00',
        //       '20:00',
        //       '21:00',
        //       '22:00',
        //       '23:00',
        //     ],
        //     splitLine: {
        //       show: true,
        //       lineStyle: {
        //         width: 1,
        //         type: 'solid',
        //         color: 'rgba(226,226,226,0.5)',
        //       },
        //     },
        //     axisTick: {
        //       show: false,
        //     },
        //   },
        //   yAxis: [
        //     {
        //       type: 'value',
        //       max: 80000,
        //       splitNumber: 4,
        //       axisTick: {
        //         show: false,
        //       },
        //       splitArea: {
        //         show: true,
        //         areaStyle: {
        //           color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
        //         },
        //       },
        //     },
        //   ],
        //   grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
        //   series: [
        //     {
        //       smooth: true,
        //       data: [
        //         111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444,
        //         22222, 11111, 4000, 2000, 500, 333, 222, 111,
        //       ],
        //       type: 'line',
        //       areaStyle: {},
        //       itemStyle: {
        //         color: '#5ab1ef',
        //       },
        //     },
        //     {
        //       smooth: true,
        //       data: [
        //         33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201,
        //         390, 198, 60, 30, 22, 11,
        //       ],
        //       type: 'line',
        //       areaStyle: {},
        //       itemStyle: {
        //         color: '#019680',
        //       },
        //     },
        //   ],
        // });
        LoadStockData("市场情绪值").then((resJson) => {
          const res = JSON.parse(resJson)
          console.log("市场情绪值",res)
          if (res.errcode == '0') {
            const option = ref({
              backgroundColor: '#ffffff',
              color: ['#37A2DA', '#32C5E9', '#67E0E3'],
              series: [
                {
                  name: '业务指标',
                  type: 'gauge',
                  center: ['55%', '40%'],
                  startAngle: 180,
                  endAngle: 0,
                  detail: {
                    formatter: function (value) {
                      if (value <= 25) {
                        option.value.graphic[0].style.fill = '#67e0e3';
                        option.value.graphic[0].style.stroke = '#67e0e3';
                      } else if (value > 75) {
                        option.value.graphic[0].style.fill = '#fd666d';
                        option.value.graphic[0].style.stroke = '#fd666d';
                      } else {
                        option.value.graphic[0].style.fill = '#37a2da';
                        option.value.graphic[0].style.stroke = '#37a2da';
                      }
                      return value.toFixed(0);
                    },
                  },
                  pointer: {
                    color: 'auto',
                  },
                  axisLine: {
                    show: true,
                    lineStyle: {
                      width: 10,
                      shadowBlur: 0,
                      color: [
                        [0.25, '#67e0e3'],
                        [0.75, '#37a2da'],
                        [1, '#fd666d'],
                      ],
                    },
                  },
                  data: [
                    {
                      value: 50,
                      name: '综合强度',
                    },
                  ],
                },
              ],
              animationDuration: 2e3,
              animationDurationUpdate: 2e3,
              graphic: [
                {
                  type: 'circle',
                  shape: {
                    r: 0,
                    cx: 0,
                    cy: 0,
                  },
                  style: {
                    fill: '#67e0e3',
                    stroke: '#67e0e3',
                    lineWidth: 3,
                  },
                  z: 13,
                },
              ],
            });
            var info = res.info;
            option.value.series[0].data[0].value = info.strong;
            setOptions(option.value);
          }

        })


      });
      return { chartRef };
    },
  });
</script>
